<template>
  <section class="home-container">
    <Card title="个人中心"
      ><CellGroup>
        <Cell title="账号" :extra="user.UserName" />
        <Cell
          @click.native="
            form = { RealName: user.RealName };
            nameVisible = true;
          "
          title="真实姓名"
          :extra="user.RealName"
          to="#"
        />
        <Cell title="角色" :extra="user.RoleName" />
        <Cell
          @click.native="
            form = {};
            pwdVisible = true;
          "
          title="修改密码"
          to="#"
        />
      </CellGroup>
      <Button @click="quit" type="error" size="large" long>退出</Button>
    </Card>
    <!-- 修改真实姓名 -->
    <Modal title="修改真实姓名" v-model="nameVisible">
      <Form ref="nameForm" :model="form" :rules="nameRules" :label-width="80">
        <FormItem label="真实姓名" prop="RealName">
          <Input v-model.trim="form.RealName" :maxlength="20"></Input>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button @click="nameVisible = false">关闭</Button>
        <Button type="primary" @click="updateRealName" :loading="saving"
          >保存</Button
        >
      </div>
    </Modal>
    <!-- 修改密码 -->
    <Modal title="修改密码" v-model="pwdVisible">
      <Form ref="pwdForm" :model="form" :rules="pwdRules" :label-width="80">
        <FormItem label="旧密码" prop="OldPassword">
          <Input
            type="password"
            v-model.trim="form.OldPassword"
            :maxlength="20"
          ></Input>
        </FormItem>
        <FormItem label="新密码" prop="Password">
          <Input
            type="password"
            v-model.trim="form.Password"
            :maxlength="20"
          ></Input>
        </FormItem>
        <FormItem label="确认密码" prop="ConfirmPwd">
          <Input
            type="password"
            v-model.trim="form.ConfirmPwd"
            :maxlength="20"
          ></Input>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button @click="pwdVisible = false">关闭</Button>
        <Button type="primary" @click="updatePassword" :loading="saving"
          >保存</Button
        >
      </div>
    </Modal>
  </section>
</template>

<script>
import { mapState } from "vuex";
import { UpdateRealName, UpdatePassword } from "@/api/Doctor";

export default {
  name: "Me",
  data() {
    return {
      // 姓名模态框是否显示
      nameVisible: false,
      // 修改密码模态框是否显示
      pwdVisible: false,
      // form表单
      form: {},
      // 是否保存
      saving: false,
      // 真实姓名的规则
      nameRules: {
        RealName: [
          { required: true, message: "真实姓名不能为空", trigger: "blur" },
          { min: 2, max: 20, message: "真实姓名必须为2-20位", trigger: "blur" },
        ],
      },
      // 密码规则
      pwdRules: {
        OldPassword: [
          {
            required: true,
            message: "旧密码不能为空",
            trigger: "blur",
          },
          { min: 6, max: 20, message: "旧密码必须为6-20位", trigger: "blur" },
        ],
        Password: [
          { required: true, message: "新密码不能为空", trigger: "blur" },
          { min: 6, max: 20, message: "新密码必须为6-20位", trigger: "blur" },
        ],
        ConfirmPwd: [
          { required: true, message: "确认密码不能为空", trigger: "blur" },
          { min: 6, max: 20, message: "确认密码必须为6-20位", trigger: "blur" },
          {
            validator: (rule, value, cb) => {
              if (value !== this.form.Password) {
                return cb(new Error("两次输入的密码不一致"));
              }
              if (value === this.form.OldPassword) {
                return cb(new Error("新旧密码不能一致"));
              }
              cb();
            },
            trigger: "blur",
          },
        ],
      },
    };
  },
  watch: {
    nameVisible(value) {
      value && this.$refs.nameForm.resetFields();
    },
    pwdVisible(value) {
      value && this.$refs.pwdForm.resetFields();
    },
  },
  methods: {
    /**
     * 更改真实姓名
     */
    async updateRealName() {
      try {
        const result = await this.$refs.nameForm.validate();
        if (!result) {
          return;
        }
        this.saving = true;
        await UpdateRealName(this.form);
        this.$Message.success("修改成功");
        this.user.RealName = this.form.RealName;
        this.nameVisible = false;
      } catch (error) {}
      this.saving = false;
    },
    /**
     * 要修改密码
     */
    async updatePassword() {
      try {
        const result = await this.$refs.pwdForm.validate();
        if (!result) {
          return;
        }
        this.saving = true;
        await UpdatePassword(this.form);
        this.pwdVisible = false;
      } catch (error) {}
      this.saving = false;
    },
    /**
     * 退出
     */
    async quit() {
      try {
        await this.$confirm("您确定要退出吗？");
        this.$exit();
      } catch (error) {}
    },
  },
  computed: {
    ...mapState(["user"]),
  },
};
</script>

<style lang="postcss" scoped>
/deep/.ivu-cell-title,
/deep/.ivu-cell-footer {
  font-size: 18px;
}

/deep/.ivu-btn-long {
  margin-top: 30px;
  padding: 9px 0;
}
</style>